<!-- 全态势分析tab页 -->
<div class="tab-pane fade in active" id="tab2">
	<!-- <h1 style="fontsize:19px;color:#E67E22;font-weight:900"><span style="color: #269AC9;font-weight:900">职位需求情况</span></h1>

	<div id="highchart_container1" style="width: 330px; height: 200px; float: left"></div>
	<div id="highchart_container3" style="width: 330px; height: 200px; float: right"></div> -->

	<h1 style="fontsize:19px;color: #E67E22;font-weight:900; clear: both"><span style="color: #269AC9;font-weight:900">工作地点分析</span></h1>

	<div id="highchart_container3" style="width: 330px; height: 200px; float: left"></div>
	<div id="highchart_container4" style="width: 330px; height: 200px; float: right"></div>

	<h1 style="fontsize:19px;color: #E67E22;font-weight:900; clear: both"><span style="color: #269AC9;font-weight:900">工作经验分析</span></h1>

	<div id="highchart_container5" style="width: 330px; height: 200px; float: left"></div>
	<div id="highchart_container6" style="width: 330px; height: 200px; float: right"></div>

	<h1 style="fontsize:19px;color: #E67E22;font-weight:900; clear: both"><span style="color: #269AC9;font-weight:900">相关软件分析</span></h1>

	<div id="highchart_container7" style="width: 330px; height: 300px; float: left"></div>
	<div id="highchart_container8" style="width: 330px; height: 300px; float: right"></div>
</div>
<script type="text/javascript">
    $(function () {
        <% if @dataArray.nil? %>
        $('#highchart_container1').html("没有任何数据");
        <% else %>
        $('#highchart_container1').highcharts({
            chart: {
                zoomType: 'x',
                type: 'spline',
                panning: true,
                panKey: 'shift'
            },
            title: {
                text: null
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    month: '%b/%y'
                },
                tickInterval: 3 * 30 * 24 * 3600000,
                maxZoom: 4 * 30 * 24 * 3600000
            },
            yAxis: {
                min: 0,
                title: {
                    text: '职位数量(个)'
                },
                plotLines: [
                    {
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }
                ]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y年%m月', this.x) + ': ' + this.y + ' 个';
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [
                {
                    name: '职位需求数量',
                    data: <%= @dataArray %>
                }
            ]
        });
        <% end %>


        // 显示时间和薪资关系
        <% if @data2Array.nil? %>
        $('#highchart_container2').html("没有任何数据");
        <% else %>
        $('#highchart_container2').highcharts({
            chart: {
                zoomType: 'x',
                type: 'spline',
                panning: true,
                panKey: 'shift'
            },
            title: {
                text: null
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    month: '%b/%y'
                },
                tickInterval: 3 * 30 * 24 * 3600000,
                maxZoom: 4 * 30 * 24 * 3600000
            },
            yAxis: {
                min: 0,
                title: {
                    text: '薪资(k)'	//
                },
                plotLines: [
                    {
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }
                ]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y年%m月', this.x) + ': ' + this.y + ' k';
                }
            },
            legend: {
                enabled: true
            },
            credits: {
                enabled: false
            },
            series: [
                {
                    name: '最少工资平均水平',	//
                    data: <%= @data2Array %>
                },
                {
                    name: '最大工资平均水平',	//
                    data: <%= @data3Array %>
                }
            ]
        });
        <% end %>

        //第三个图表
        <% if @dataArray_2.nil? %>
        $('#highchart_container3').html("没有任何数据");
        <% else %>
        $('#highchart_container3').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>'
                    }
                }
            },
            series: [
                {
                    type: 'pie',
                    name: '职位需求比例',	//
                    data: [
                        <% @dataArray_2.each do |data| %>
                        ['<%= raw(data[0].to_s) %>', <%= data[1].to_d %>],
                        <% end %>
                    ]
                }
            ]
        });
        <% end %>

        //第四个图表
        <% if @cityArray_2.nil? %>
        $('#highchart_container4').html("没有任何数据");
        <% else %>
        $('#highchart_container4').highcharts({
            chart: {
                type: 'columnrange',
                inverted: true
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            tooltip: {
                valueSuffix: 'k'
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                columnrange: {
                    dataLabels: {
                        enabled: true,
                        formatter: function () {
                            return this.y + "k";
                        }
                    }
                }
            },
            xAxis: {
                categories: [
                    <% @cityArray_2.each do |city| %>
                    '<%= raw(city.to_s) %>',
                    <% end %>
                ]
            },
            yAxis: {
                title: {
                    text: '薪资(k)'	//
                }
            },
            series: [
                {
                    name: '薪资',	//
                    data: <%= @rangeArray_2 %>
                }
            ]
        });
        <% end %>

        //第五个图表
        <% if @dataArray_3.nil? %>
        $('#highchart_container5').html("没有任何数据");
        <% else %>
        $('#highchart_container5').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>'
                    }
                }
            },
            series: [
                {
                    type: 'pie',
                    name: '工作经验比例',
                    data: [
                        <% @dataArray_3.each do |data| %>
                        ['<%= raw(data[0].to_s) %>', <%= data[1].to_d %>],
                        <% end %>
                    ]
                }
            ]
        });
        <% end %>

        //第六个图表
        <% if @experienceArray_3.nil? %>
        $('#highchart_container6').html("没有任何数据");
        <% else %>
        $('#highchart_container6').highcharts({
            chart: {
                type: 'columnrange',
                inverted: true
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            tooltip: {
                valueSuffix: 'k'
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                columnrange: {
                    dataLabels: {
                        enabled: true,
                        formatter: function () {
                            return this.y + "k";
                        }
                    }
                }
            },
            xAxis: {
                categories: [
                    <% @experienceArray_3.each do |experience| %>
                    '<%= raw(experience.to_s) %>',
                    <% end %>
                ]
            },
            yAxis: {
                title: {
                    text: '薪资(k)'
                }
            },
            series: [
                {
                    name: '薪资',
                    data: <%= @rangeArray_3 %>
                }
            ]
        });
        <% end %>


        //第七张图标 相关软件职位需求数量drilldown图
        <% if @chart7_osp.nil? || @chart7_osp.length <= 1 %>
        $('highchart_container7').html('没有相关软件')
        <% else %>
        $(function () {

            var colors = Highcharts.getOptions().colors,
                    categories = [
                        <% @chart7_osp.each do |osp| %>
                        '<%=osp.name.to_s %>',
                        <% end %>
                    ],
                    data = [
                        <% for i in 0..@chart7_osp.length-1 %>
                        {
                            y: <%=@chart7_count[i].to_s %>,
                            color: colors[<%=i %>],
                            drilldown: {
                                name: 'cities',
                                categories: [
                                    <% @chart7_drilldown_city[i].each do |city| %>
                                    '<%=city.to_s %>',
                                    <% end %>
                                ],
                                data: [
                                    <% @chart7_drilldown_count[i].each do |count| %>
                                    <%=count.to_s %>,
                                    <% end %>
                                ],
                                color: colors[<%=i %>]
                            }
                        },
                        <% end %>
                    ];

            function setChart(name, categories, data, color) {
                chart.xAxis[0].setCategories(categories, false);
                chart.series[0].remove(false);
                chart.addSeries({
                    name: name,
                    data: data,
                    color: color || 'white'
                }, false);
                chart.redraw();
            }

            var chart = $('#highchart_container7').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                xAxis: {
                    categories: categories,
                    labels: {
                        formatter: function() {
                            return(this.value.length>20?this.value.substring(0,20) + "...":this.value);
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: '职位需求数量(个)'
                    }
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function () {
                                    var drilldown = this.drilldown;
                                    if (drilldown) { // drill down
                                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                    } else { // restore
                                        setChart(name, categories, data);
                                    }
                                }
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            color: colors[0],
                            style: {
                                fontWeight: 'bold'
                            },
                            formatter: function () {
                                return this.y;
                            }
                        }
                    }
                },
                tooltip: {
                    formatter: function () {
                        var point = this.point,
                                s = this.x + ':<b>' + this.y + '个职位需求</b><br/>';
                        if (point.drilldown) {
                            s += '点击查看 ' + point.category + ' 职位需求地区分布情况';
                        } else {
                            s += '点击返回上一级';
                        }
                        return s;
                    }
                },
                series: [
                    {
                        name: name,
                        data: data,
                        color: 'white'
                    }
                ],
                exporting: {
                    enabled: false
                }
            })
                    .highcharts(); // return chart
        });
        <% end %>


        //第八张图标 相关软件职位需求数量drilldown图
        <% if @chart8_osp.nil? || @chart8_osp.length <= 1 %>
        $('highchart_container8').html('没有相关软件')
        <% else %>
        $(function () {

            var colors = Highcharts.getOptions().colors,
                    categories = [
                        <% @chart8_osp.each do |osp| %>
                        '<%=osp.name.to_s %>',
                        <% end %>
                    ],
                    
                    data = [
                        <% for i in 0..@chart8_osp.length-1 %>
                        {
                            y: <%=@chart8_value[i].to_s %>,
                            color: colors[<%=i %>],
                            drilldown: {
                                name: 'cities',
                                categories: [
                                    <% @chart8_drilldown_city[i].each do |city| %>
                                    '<%=city.to_s %>',
                                    <% end %>
                                ],
                                data: [
                                    <% @chart8_drilldown_value[i].each do |value| %>
                                    <%=value.to_s %>,
                                    <% end %>
                                ],
                                color: colors[<%=i %>]
                            }
                        },
                        <% end %>
                    ];

            function setChart(name, categories, data, color) {
                chart.xAxis[0].setCategories(categories, false);
                chart.series[0].remove(false);
                chart.addSeries({
                    name: name,
                    data: data,
                    color: color || 'white'
                }, false);
                chart.redraw();
            }

            var chart = $('#highchart_container8').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                xAxis: {
                    categories: categories,
                    labels: {
                        formatter: function() {
                            return(this.value.length>20?this.value.substring(0,20) + "...":this.value);
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: '平均薪资(K)'
                    }
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function () {
                                    var drilldown = this.drilldown;
                                    if (drilldown) { // drill down
                                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                    } else { // restore
                                        setChart(name, categories, data);
                                    }
                                }
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            color: colors[0],
                            style: {
                                fontWeight: 'bold'
                            },
                            formatter: function () {
                                return Math.round(this.y * 100) / 100;
                            }
                        }
                    }
                },
                tooltip: {
                    formatter: function () {
                        var point = this.point,
                                s = this.x + ':<b>' + Math.round(this.y * 100) / 100 + 'K平均薪资</b><br/>';
                        if (point.drilldown) {
                            s += '点击查看 ' + point.category + ' 薪资水平地区分布情况';
                        } else {
                            s += '点击返回上一级';
                        }
                        return s;
                    }
                },
                series: [
                    {
                        name: name,
                        data: data,
                        color: 'white'
                    }
                ],
                exporting: {
                    enabled: false
                }
            })
                    .highcharts(); // return chart
        });
        <% end %>

    }); //function的结尾（最外层）
</script>